<template>
	<view class="message-wrap page-bg">
		<view class="message-time desc">今天16:45</view>
		<view class="message-item">
			
			<view class="order-shop">
				<view class="order-shop-name">云平邵梦</view>
				<view class="link desc">查看详情</view>
			</view>

			<view class="goods-item">
				<image class="goods-img" src="../../static/img_01.png"></image>
				<view class="goods-info">
					<view class="goods-title">雀巢三合一咖啡，三种口味任你选择，又一杯咖啡</view>
					<view class="goods-price">
						<text class="price yuan">399</text>
						<text class="origin-price yuan">399</text>
						<text class="num">10人团</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="message-time desc">今天16:45</view>
		<view class="message-item">
			<view class="order-shop">
				<view class="order-shop-name">云平邵梦</view>
				<view class="link desc">查看详情</view>
			</view>
		
			<view class="goods-item">
				<image class="goods-img" src="../../static/img_01.png"></image>
				<view class="goods-info">
					<view class="goods-title">雀巢三合一咖啡，三种口味任你选择，又一杯咖啡</view>
					<view class="goods-price">
						<text class="price yuan">399</text>
						<text class="origin-price yuan">399</text>
						<text class="num">10人团</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			// #ifdef H5
			if (!this.$isLogin()) {
				this.$login.uniLogin()
			}
			// #endif 
		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');

	.message-wrap{
		padding: 30upx;
		box-sizing: border-box;
	}
	.message-item {
		background-color: @f;
		.br;
		.content-20;
		margin-bottom: 30upx;
	}
	.message-time{
		margin-bottom: 20upx;
		text-align: center;
	}
	.order-group:last-child {
		margin-bottom: 0;
	}

	.order-shop {
		width: 100%;
		margin-bottom: 20upx;
		.flex-base;

		.order-shop-name {
			.flex-base;
			.f32;
			.fw;
			&::after {
				content: '';
				display: block;
				width: 16upx;
				height: 16upx;
				margin-left: 10upx;
				border-radius: 100%;
				background: @theme-color;
			}
		}
	}

	.goods-item {
		.flex-base;
		padding: 0;
		.goods-img {
			width: 150upx;
			height: 150upx;
			.br;
			margin-right: 30upx;
			flex-shrink: 0;
		}
		.goods-info {
			flex-grow: 2;
		}
		.goods-title {
			.f30;
			width: 100%;
			line-height: 38upx;
		}
		.goods-price {
			margin-top: 20upx;
			width: 100%;
			.flex-base;
			justify-content: flex-start;
			.origin-price{
				flex-grow: 2;
				margin-left: 10upx;
			}
			.num {
				color: @f;
				background: @font-orange-color;
				height: 35upx;
				line-height: 35upx;
				text-align: center;
				border-radius: 20upx 0 20upx 0;
				justify-self: flex-end;
				font-size: 20upx;
				padding: 0 10upx;
			}
		}

	}
</style>
